/** @format */

// 引入flex.scss

// @import "flex.scss";
.main-width {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}
.w1600px {
  width: 1600px !important;
  max-width: 1600px !important;
  margin: 0 auto;
  box-sizing: border-box;

  @media screen and (min-width: 769px) and (max-width: 1620px) {
    width: 100% !important;
    max-width: 100% !important;
  }
  // padding: 0 16px;
}

.w1600 {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media screen and (max-width: 1366px) {
  .main-width {
    max-width: 1300px;
  }
}
@media screen and (max-width: 1300px) {
  .main-width {
    max-width: 1200px;
  }
}
@media screen and (max-width: 1200px) {
  .main-width {
    max-width: 1100px;
  }
}
@media screen and (max-width: 1100px) {
  .main-width {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1000px) {
  .main-width {
    max-width: 900px;
  }
}
@media screen and (max-width: 900px) {
  .main-width {
    max-width: 768px;
  }
}

@media screen and (max-width: 768px) {
  .main-width {
    padding: 0;
  }
}

body {
  background: #f0ece4;
}

.mgt-20 {
  margin-top: 20px;
}

// 版心
.w {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  // padding: 0 15px;
  box-sizing: border-box;
}

// 响应式媒体查询
@media screen and (max-width: 1920px) {
  .w {
    max-width: 1440px;
  }
}

@media screen and (max-width: 1440px) {
  .w {
    // max-width: calc(100% - 40px);
    width: calc(100% - 40px);
  }
}
// @media screen and (max-width: 1440px) {
//   .w {
//     max-width: 1400px;
//   }
// }
// @media screen and (max-width: 1366px) {
//   .w {
//     max-width: 1300px;
//   }
// }
// @media screen and (max-width: 1300px) {
//   .w {
//     max-width: 1200px;
//   }
// }
// @media screen and (max-width: 1200px) {
//   .w {
//     max-width: 1100px;
//   }
// }
// @media screen and (max-width: 1100px) {
//   .w {
//     max-width: 1000px;
//   }
// }
// @media screen and (max-width: 1000px) {
//   .w {
//     max-width: 900px;
//   }
// }
// @media screen and (max-width: 900px) {
//   .w {
//     max-width: 768px;
//   }
// }

@media screen and (max-width: 768px) {
  .w {
    width: 100%;
    // margin: 0 !important;
    padding: 0 10px;
  }
}
// 遮罩层
.mark {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
}

// 横线
.line {
  width: 100%;
  height: 1px;
  background: #d5d1c9;
}

.cursor {
  cursor: pointer;
}
.hover {
  &:hover {
    color: $main;
  }
}

// 清除弹框偏移
.el-popup-parent--hidden {
  padding: 0 !important;
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 12px; // 滚动条宽度
  height: 8px; // 滚动条高度，主要用于水平滚动条
  @media screen and (max-width: 768px) {
    width: 0;
  }
}

::-webkit-scrollbar-track {
  background: #f0ece4; // 轨道背景色
  border-radius: 4px; // 轨道圆角
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1; // 滑块颜色
  border-radius: 4px; // 滑块圆角
  &:hover {
    background: #a8a8a8; // 鼠标悬停时滑块颜色
    cursor: pointer;
  }
}

.wp {
  // padding: 0 16px !important;
  @media screen and (max-width: 768px) {
    padding: 0 12px !important;
    box-sizing: border-box;
  }
}

.mwp {
  padding: 0 12px !important;
  box-sizing: border-box;
}
